<template>
	<view class="album-wrap">
		<!-- {{ablumListData}} -->
		<div v-for="(item,index) in ablumListData" :key="index" @click="toAlbumDetails(item)">
			<div class="album-item">
				<image class="album-cover" :src="item.picUrl" mode="widthFix"></image>
				<div class="album-info">
					<p class="album-name des">{{item.name}}</p>
					<p class="album-name des">{{item.publishTime | publishTime}}</p>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		formateDate
	} from "../utils/helper.js"
	export default {
		props: {
			ablumListData: {
				type: Array,
				default () {
					return []
				}
			}
		},
		filters: {
			publishTime(val) {
				return formateDate(val);
			}
		},
		data() {
			return {

			};
		},
		methods: {
			async toAlbumDetails(item) {
				uni.navigateTo({
					url: `/pages/AlbumDetails/AlbumDetails?id=${item.id}`
				})
			}
		},
	}
</script>

<style lang="scss">
	.album-wrap {
		.album-item {
			display: flex;
			align-items: center;
			border-top: 1px solid lighten(gray, 40%);
			.album-cover {
				width: 4rem;
				height: 4rem;
				vertical-align: middle;
				margin-right: .8rem;
				border-radius: 20%;
				margin-top: .5rem;
				box-shadow: 0px 0px 5px #000000;
			}

			.album-info {
				display: inline-block;

				.des {
					color: lighten(gray, 9%);
					font-size: .8rem;
				}
			}

		}
	}
</style>
